<template>
  <div class="myNav">
    <div class="myNav-userinfo" :style="{ opacity: opacity }">
      <div class="myNav-userImg">
        <img :src="userImg" alt="" />
      </div>
      <div class="myNav-username">{{ username }}</div>
    </div>
    <!-- <div class="followBtn" :style="{ background: `rgba(255, 255, 255,${opacity})` }">
      <button class="focus">+ 关注</button>
    </div> -->
    <div
      class="setting"
      :style="{ background: `rgba(255, 255, 255,${opacity})` }"
    >
      <router-link to="/setting">
        <van-icon color="#000000" name="setting-o" size="25"
      /></router-link>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from '@vue/runtime-core';
export default {
  props: ['username', 'userImg'],
  setup() {
    let state = reactive({
      opacity: 0,
    });
    const windowScroll = () => {
      // 滚动条距离页面顶部的距离
      // 以下写法原生兼容
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      let opacity = scrollTop / 300;
      opacity = opacity > 1 ? 1 : opacity;
      state.opacity = opacity;
    };
    onMounted(() => {
      //   console.log(document.documentElement.clientWidth);
      window.addEventListener('scroll', windowScroll);
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style scoped>
.myNav {
  opacity: 1;
  position: fixed;
  width: 100%;
  height: 6vh;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  z-index: 11;
}
.myNav-userinfo {
  flex: 1;
  opacity: 0;
  background-color: #fff;
  height: 100%;
  display: flex;
  text-align: center;
  align-items: center;
}
.myNav-userImg {
  padding-left: 10%;
}
.myNav-userImg img {
  border-radius: 50px;
  width: 25px;
  height: 25px;
}
.myNav-username {
  padding-left: 10px;
  font-size: 15px;
  line-height: 12px;
  font-weight: 700;
}
.setting {
  display: flex;
  align-items: center;
  height: 100%;
  opacity: 1;
  padding: 0 6vw;
}

.setting a {
  color: #ebedf0;
}
.followBtn {
  height: 100%;
  display: flex;
  align-items: center;
}
.focus {
  box-sizing: border-box;
  border-radius: 16px;
  border: none;
  background: rgb(76, 169, 231);
  padding: 2px 10px;
  color: #ffffff;
  font-size: 7px;
}
</style>
